<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2019/4/10
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.7.0
  -->

<template>
  <el-dialog
    :visible.sync="Show"
    title=""
    :fullscreen='true'
    :show-close='false'
    append-to-body
    custom-class="fulldialog route-dialog"
    :close-on-press-escape="false">
      <span class="custom-dialog-btn" @click="cancel">
        <i class="el-icon-close"></i>
      </span>
    <el-container>
      <el-header>
        <p class="plantitle">添加传感器</p>
      </el-header>
      <el-main>
        <el-container>
          <el-container>
            <div class="flex-left-pannel">
              <el-table
                key='tableKey'
                :data="list"
                ref="multipleTable"
                v-loading="listLoading" fit style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column label="服务器IP">
                  <template slot-scope="scope">
                    <span>{{scope.row.serverIp}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="端口号">
                  <template slot-scope="scope">
                    <span>{{scope.row.port}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="回路">
                  <template slot-scope="scope">
                    <span>{{scope.row.sensorLoop}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="地址">
                  <template slot-scope="scope">
                    <span>{{scope.row.address}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="系列">
                  <template slot-scope="scope">
                    <span>{{scope.row.series}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="所属建筑">
                  <template slot-scope="scope">
                    <span>{{scope.row.buildingName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="楼层">
                  <template slot-scope="scope">
                    <span>{{scope.row.floor}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="位置描述">
                  <template slot-scope="scope">
                    <span>{{scope.row.positionDescription}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div v-show="!listLoading" class="sensor-pagination-container">
                <div>
                  <el-checkbox v-model="isselall" :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-show="list&&list.length!==0">全选</el-checkbox>
                  <el-button type="text" style="margin-left: 10px;" @click="addToRule" v-show="list&&list.length!==0" :disabled="checklist&&checklist.length===0">添加</el-button>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
              </div>
            </div>
          </el-container>
          <el-aside width="250px" class="flex-right-pannel_withline">
            <el-scrollbar style="height:85vh">
              <div class="comm-tree-wrap">
                <div class="wrap-with-halfboder"></div>
              <p class="right-tree-title"><i class="el-icon-caret-right"></i>建筑列表</p>
              <el-button type="text" @click="viewAllTree" style="padding-left:5px;color: rgba(255, 255, 255, 0.7);">查看全部</el-button>
              <el-tree class="filter-tree"
                       :data="treeData"
                       node-key="code"
                       highlight-current
                       :expand-on-click-node='false'
                       :props="defaultProps"
                       ref="cityTree"
                       @current-change="changeClick"
                       default-expand-all>
            <span class="build-custom-tree-node" slot-scope="{ node, data }">
              <span :title="node.label" v-if="node.label.length>7">{{ node.label.substring(0,7)+"..." }}</span>
              <span :title="node.label" v-else>{{ node.label }}</span>
            </span>
              </el-tree>
              </div>
            </el-scrollbar>
          </el-aside>
        </el-container>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
  //树形api
  import {
    fetchTree,
  } from "@/api/device/deviceBuilding/index";
  import {
    unFiremainPage,
    addSensor
  } from "@/api/datahandler/pushRules/index";

    export default {
      name: "firemainAdd",
      props:{
        Show:{
          type:Boolean,
          default:false,
        },
        noticeRuleId:{
          default:'',
        },
        channelId:{
          default: '',
        }
      },
      data(){
        return{
          canadd:false,
          list:[],
          treeData: [],
          defaultProps: {
            children: "childList",
            label: "name",
            classval:"status"
          },
          listQuery: {
            pageNo: 1,
            limit: 10,
            buildingId: ''
          },
          total:0,
          checklist:[],
          listLoading:false,
          isselall:false,
          isIndeterminate:false,
        }
      },
      methods: {
        init(){
          //初始化
          fetchTree().then(data => {
            if (data.data.length!==0) {
              this.treeData = data.data;
            }else{
            }
          });
          this.getList();
        },
        getList(){
          //列表获取
          this.listLoading = true;
          unFiremainPage(Object.assign({},this.listQuery,{channelId:this.channelId,noticeRuleId:this.noticeRuleId})).then(response => {
            this.list = response.data.rows;
            this.total = response.data.total;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        },
        viewAllTree(){
          //树形结构
          this.$refs.cityTree.setCurrentKey(null);
          this.listLoading = true;
          this.listQuery.buildingId = '';
          this.listQuery.code = undefined;
          this.getList();
        },
        changeClick(data) {
          //  清空全选
          this.isselall = false;
          this.isIndeterminate = false;

          if (data.childList) {
            // 如果有下层，隐藏下载按钮
            this.listLoading = true;
            this.listQuery.buildingId = undefined;
            this.listQuery.code = data.code;
            unFiremainPage(Object.assign({},this.listQuery,{channelId:this.channelId,noticeRuleId:this.noticeRuleId})).then(data => {
              this.list = data.data.rows;
              this.total = data.data.total;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            })
          } else {
            this.listLoading = true;
            this.listQuery.buildingId = data.code;
            this.listQuery.code = undefined;
            unFiremainPage(Object.assign({},this.listQuery,{channelId:this.channelId,noticeRuleId:this.noticeRuleId})).then(data => {
              this.list = data.data.rows;
              this.total = data.data.total;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            })
          }
        },
        handleSelectionChange(val){
          this.checklist=[...val];
          let length = this.total>this.list.length?this.list.length:this.total;
          if (val.length===length) {
            this.isselall=true;
            this.isIndeterminate=false;
          }else{
            this.isselall=false;
            this.isIndeterminate=true;
          }
          if (val.length===0) {
            this.isIndeterminate=false;
          }
        },
        cancel() {
          this.$emit("update:Show", false);
        },
        handleCheckAllChange(){
          this.$refs.multipleTable.toggleAllSelection();
        },
        handleSizeChange(val) {
          this.listQuery.limit = val;
          this.getList();
        },
        handleCurrentChange(val) {
          this.listQuery.pageNo = val;
          this.getList();
        },
        addToRule(){
          //添加到规则列表
          this.delsensorid=[];
          this.checklist.forEach((item,index)=>{
            this.delsensorid.push(item.id);
          });
          addSensor(Object.assign({},{sensorIds:(this.delsensorid).toString(),noticeRuleId:this.noticeRuleId})).then(res=>{
              if (res.status===200){
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                  duration: 2000
                });
                this.$emit("update:Show", false);
                this.$emit("updateList");
              }
          })
        },
      },
      watch: {
        Show(v) {
          if (v) {
            let self = this;
            this.$nextTick(() => {
              self.init();
            });
          } else {
            this.listQuery.buildingId = '';
          }
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss">

  .flex-right-pannel_withline {
    min-height: 86vh;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tree-node__label {
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .sensor-pagination-container{
    display:flex;
    justify-content:space-between;
    padding:10px 10px;
  }
  .build-custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .fulldialog{
    &.route-dialog{
      .flex-left-pannel{
        width: 100%;
        padding: 20px 30px;
        height: calc(100vh - 60px);
        overflow-y: auto;
      }
      .flex-left-pannel_withline{
        min-height: 86vh;
        box-sizing: border-box;
        padding: 10px;
      }
      .el-checkbox{
        display: inline-block;
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .custom-dialog-btn {
        position: absolute;
        font-size: 30px;
        left: 24px;
        top: 14px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
      .el-header {
        padding: 0;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .is-vertical {
          height: 100%;
        }
      }
      .plantitle {
        text-align: center;
        font-size: 20px;
      }
    }
  }
  </style>
